<!DOCTYPE HTML>
<html>
<head>
  <meta charset="utf-8">
  <!-- support for mobile touch devices -->
  <meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1, maximum-scale=1">

  <link href="../bootstrap.min.css" rel="stylesheet">
  <link href="../dialogPolyfill.css" rel="stylesheet">
  <link href="../cornerstone.min.css" rel="stylesheet">
</head>
<body>
  <div class="container">
    <div class="page-header">
      <h1>
        Segmentation Brush Example
      </h1>
      <p>
        This page contains an example of the segmentation paintbrush tool
      </p>
      <a href="../index.html">Go back to the Examples page</a>
    </div>

    <div class="row">

      <div class="col-xs-9">
        <div style="width:512px;height:512px;position:relative;display:inline-block;"
            oncontextmenu="return false"
            class='cornerstone-enabled-image'
            unselectable='on'
            onselectstart='return false;'
            onmousedown='return false;'>
          <div id="dicomImage"
            style="width:512px;height:512px;top:0px;left:0px; position:absolute;">
          </div>
        </div>
      </div>

      <div class="col-xs-3">

        <label for="toolColor">Color</label>
        <div class="row" id="toolColor">
          <button id="drawPrev" class="btn btn-primary">Prev Color</button>
          <button id="drawNext" class="btn btn-primary">Next Color</button>
        </div>

        <label for="toolSize">Size</label>
        <div class="row" id="toolSize">
          <button id="drawDecrease" class="btn btn-primary">-</button>
          <button id="drawIncrease" class="btn btn-primary">+</button>
        </div>
        <div class="row">
            <label for="toolType">Type</label>
            <select id="toolType" style="width:100%">
                <option value="brush">Default</option>
                <option value="adaptiveBrush">Adaptive</option>
            </select>
        </div>

        <label for="toolDeactivate">Deactivate</label>
        <div class="row" id="toolDeactivate">
          <button id="deactivate" class="btn btn-primary">Deactivate</button>
        </div>

      </div>

      <div class="col-xs-9">
        <h5>Controls:</h5>
        <ul>
          <li>Brush tool</li>
          <ul>
            <li>Left click: paint</li>
            <li> '+' and '-' keys: increase/decrease brush size</li>
            <li>'[' and ']' keys: change segmentation color</li>
          </ul>
          <li>Navigation</li>
          <ul>
            <li>Middle Mouse button drag: pan</li>
            <li>Mouse Wheel: scroll through images</li>
            <li>Right click drag: zoom</li>
          </ul>
        </ul>
      </div>

    </div>
  </div>
</body>

<!-- include the cornerstone library -->
<script src="../cornerstone.min.js"></script>

<script src="../cornerstoneMath.min.js"></script>

<!-- include the cornerstone tools library -->
<script src="../../dist/cornerstoneTools.js"></script>
<script>window.cornerstoneTools || document.write('<script src="https://unpkg.com/cornerstone-tools">\x3C/script>')</script>

<!-- include special code for these examples which provides images -->
<script src="../exampleImageLoader.js"></script>

<script>
  const element = document.getElementById('dicomImage');
  const configuration = cornerstoneTools.brush.getConfiguration();

  let toolType = 'brush';

  const imageIds = [
      'example://1',
      'example://2',
  ];

  var stack = {
      currentImageIdIndex : 0,
      imageIds: imageIds
  };

  cornerstone.enable(element);
  cornerstone.loadImage(imageIds[0]).then(function(image) {
    cornerstone.displayImage(element, image);

    cornerstoneTools.addStackStateManager(element, ['stack']);
    cornerstoneTools.addToolState(element, 'stack', stack);

    cornerstoneTools.mouseInput.enable(element);
    cornerstoneTools.mouseWheelInput.enable(element);
    cornerstoneTools.keyboardInput.enable(element);
    element.tabIndex = 0;
    element.focus();

    cornerstoneTools.stackScrollWheel.activate(element);
    cornerstoneTools.pan.activate(element, 2);
    cornerstoneTools.zoom.activate(element, 4);
    cornerstoneTools[toolType].activate(element, 1);
  });

  const drawNextButton = document.getElementById('drawNext');
  drawNextButton.addEventListener('click', function () {
    const configuration = cornerstoneTools[toolType].getConfiguration();
    const numberOfColors = cornerstone.colors.getColormap("BrushColorMap").getNumberOfColors();
    let drawId = configuration.draw + 1;

    if (drawId === numberOfColors) {
      drawId = 0;
    }

    cornerstoneTools[toolType].changeDrawColor(drawId);

    element.focus();
  });

  const drawPrevButton = document.getElementById('drawPrev');
  drawPrevButton.addEventListener('click', function () {
    const configuration = cornerstoneTools[toolType].getConfiguration();
    const numberOfColors = cornerstone.colors.getColormap("BrushColorMap").getNumberOfColors();
    let drawId = configuration.draw - 1;

    if (drawId < 0 ) {
      drawId = numberOfColors - 1;
    }

    cornerstoneTools[toolType].changeDrawColor(drawId);

    element.focus();
  });

  const drawIncreaseButton = document.getElementById('drawIncrease');
  drawIncreaseButton.addEventListener('click', function () {
    const configuration = cornerstoneTools[toolType].getConfiguration();

    cornerstoneTools[toolType].increaseRadius();

    element.focus();
  });

  const drawDecreaseButton = document.getElementById('drawDecrease');
  drawDecreaseButton.addEventListener('click', function () {
    const configuration = cornerstoneTools[toolType].getConfiguration();

    cornerstoneTools[toolType].decreaseRadius();

    element.focus();
  });

  const deactivateButton = document.getElementById('deactivate');
  deactivateButton.addEventListener('click', function(){
    cornerstoneTools.brush.deactivate(element);
    cornerstoneTools.adaptiveBrush.deactivate(element);

    cornerstone.updateImage(element, true);
    element.focus();
  });

  const toolTypeSelect = document.getElementById('toolType');
  toolTypeSelect.addEventListener('change', function(){
    cornerstoneTools.brush.deactivate(element);
    cornerstoneTools.adaptiveBrush.deactivate(element);

    toolType = toolTypeSelect.value;
    cornerstoneTools[toolType].activate(element, 1);
    cornerstone.updateImage(element, true);
    element.focus();
  });


</script>
</html>
